<template>
    <div class="file-downloader" style="margin-right: 20px;">
        <el-button @click="downloadFile" type="text" :disabled="isDownloading" :loading="isDownloading">
            <span v-if="!isDownloading">
                下载文件
            </span>
            <span v-else>
                下载中...
            </span>
        </el-button>
    </div>
</template>

<script>
import APIProjectFile from "@/api/apiProjectFile";

export default {
    name: 'FileDownloader',
    props: {
        // 要下载的文件的原始URL
        fileUrl: {
            type: String,
            required: true
        },
        // 自定义的文件名
        fileName: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            isDownloading: false
        }
    },
    methods: {
        /**
         * 下载文件的主方法
         */
        async downloadFile() {
            try {
                if (this.isDownloading){
                    return
                }
                // 显示加载状态
                this.isDownloading = true;

                const params = {
                    token: this.$store.state.token,
                    resourceUrl: this.fileUrl,
                }
                APIProjectFile.downloadProjectFile(params).then((res) => {
                    // 处理下载
                    this.handleBlobDownload(res.data, this.fileName);
                    // 通知下载完成
                    this.isDownloading = false;
                    this.$message({
                        message: '下载完成',
                        type: 'success'
                    });
                });
                // // 调用后端接口获取Blob数据
                // const response = await axios({
                //     url: '/checkorder/manager/pc/user/downloadFile',
                //     method: 'get',
                //     params: {
                //         resourceUrl: this.fileUrl,
                //         token: this.$store.state.token
                //     },
                //     responseType: 'blob' // 关键：指定响应类型为blob
                // });
                // // 处理下载
                // this.handleBlobDownload(response.data, this.fileName);
                // // 通知下载完成
                // this.$emit('download-complete');
            } catch (error) {
                this.isDownloading = false;
                console.error('文件下载失败:', error);
                this.$message({
                    message: error.message || '文件下载失败，请稍后重试',
                    type: 'error'
                });
            }
        },

        /**
         * 处理Blob数据并触发下载
         * @param {Blob} blobData - Blob格式的数据
         * @param {String} fileName - 自定义的文件名
         */
        handleBlobDownload(blobData, fileName) {
            // 创建blob对象
            const blob = new Blob([blobData]);

            // 创建下载链接
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;

            // 设置自定义文件名
            a.download = fileName;

            // 触发下载
            document.body.appendChild(a);
            a.click();

            // 清理资源
            document.body.removeChild(a);
            window.URL.revokeObjectURL(url);
        }
    }
}
</script>

<style scoped>
.download-btn {
    background-color: #42b983;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background-color 0.3s;
}

.download-btn:hover {
    background-color: #359e75;
}

.download-btn i {
    font-size: 14px;
}
</style>
